import { useState } from 'react'
import {LeftOutlined, RightOutlined } from '@ant-design/icons';
// import { adList } from '../../data/Tool';
function HomeNav(props:any) {

  // 导航 

  let [buttonShow, setButtonShow] = useState(true)
    let [distance,setDistance]=useState(0)
    // let navigate=usenavigate()
    const handleClick=(direction:'left'|'right')=>{
        if(direction==='left'){
            setDistance(0);
            setButtonShow(true)
            
        }else{
            setDistance(-420);
            setButtonShow(false)
        }
    }
  return (
    <div className='HomeNav'>
      <div className='NavList' style={{transform:`translateX(${distance}px)`}}>
        {
           props.adList.map((item:string)=>(
                <img width={210} key={item} src={item} alt="" />
            ))
        }

      </div>
      {/* 左右箭头  */}
      <button style={{display:buttonShow ? 'none' : 'block'}} onClick={()=>handleClick('left')} className='Nav_left'>
        <LeftOutlined/>
      </button>
       <button style={{display:!buttonShow ? 'none' : 'block'}} onClick={()=>handleClick('right')} className='Nav_right'>
        <RightOutlined/>
      </button>
    </div>
  )
}

export default HomeNav
